<template>
    <div class="components-page-child">
        <a-card class="page-child-card" :title="title" :style="{
            'width' : screen_width,
            'height' : screen_height,
        }">
            <span class="op-btns" slot="extra" >
                <a-icon class="btn" type="fullscreen" @click="handleFull" v-if="!full_screen" />
                <a-icon class="btn" type="fullscreen-exit" @click="handleFull" v-else />
                <a-icon class="btn" type="close" @click="handleClose" />
            </span>
            <slot name="content"></slot>
                
        </a-card>
    </div>
</template>

<script>
export default {
    props:{
        "title" : {
            type    : String,
            default : ""
        },
        "width":{
            type    : String,
            default : '600px'
        },
        "height":{
            type    : String,
            default : '50%'
        },
    },
    watch:{
        width(val,oldVal){
            this.screen_width = val;
        },
        height(val,oldVal){
            this.screen_height = val;
        }
    },
    data(){
        return {
            // 全屏
            "full_screen" : false,

            "screen_width"  : null,
            "screen_height" : null,
        }
    },
    created(){
        this.screen_width = this.width;
        this.screen_height = this.height;
    },
    methods:{
        // 点击全屏
        handleFull(){
            this.full_screen = !this.full_screen;
            if(this.full_screen){
                this.screen_width = '100%';
                this.screen_height = '100%';
            }else{
                this.screen_width = this.width;
                this.screen_height = this.height;
            }
        },
        // 点击关闭
        handleClose(){
            this.$emit("close");
        }
    }
}
</script>


<style lang="less" scoped>
@import "./page_child.less";
</style>